// 聚焦近期热点
import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import Title from '../title'
import Nav from '../nav/Nav'
import ImageFallback from '../Fimage/Lieimg'
import './focusing.css'


function Focusing() {
  // 模拟数据，包含内容和对应的小图标
  const items = [
    {
      text: '精选推荐',
      images: 'https://js.ibaotu.com/act/24/09/11/66e10ae2b0479.jpg',
      defaultImg: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.Ugx5mJZ0_2gq_iAIh8RvEQHaGc?w=219&h=190&c=7&r=0&o=5&dpr=1.5&pid=1.7',
      list: [
        { images: 'https://js.ibaotu.com/act/24/08/26/66cc025460db9.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/08/08/66b422a682f80.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/09/11/66e10b0d11610.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/09/03/66d672e0646d8.jpg', href: '' }
      ]
    },
    {
      text: '秋日营销',
      images: 'https://js.ibaotu.com/act/24/08/26/66cc0250e7fc5.jpg',
      defaultImg: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.Ugx5mJZ0_2gq_iAIh8RvEQHaGc?w=219&h=190&c=7&r=0&o=5&dpr=1.5&pid=1.7',
      list: [
        { images: 'https://js.ibaotu.com/act/24/08/26/66cc025460db9.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/08/26/66cc0257775b0.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/08/26/66cc025b7f675.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/08/26/66cc025e177db.jpg', href: '' },
      ]

    },
    {
      text: '前言风格',
      images: 'https://js.ibaotu.com/act/24/08/16/66befac8df2fe.jpg',
      list: [
        { images: 'https://js.ibaotu.com/act/24/08/26/66cc025460db9.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/08/26/66cc0257775b0.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/08/16/66befacf5274f.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/08/26/66cc025e177db.jpg', href: '' }]
    },
    {
      text: '甄选实拍',
      images: 'https://js.ibaotu.com/act/24/09/03/66d6732e179f8.jpg',
      list: [
        { images: 'https://js.ibaotu.com/act/24/08/26/66cc025460db9.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/09/03/66d6734753ca2.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/08/26/66cc025b7f675.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/08/26/66cc025e177db.jpg', href: '' },
      ]

    },
    {
      text: '热门视频',
      images: 'https://js.ibaotu.com/act/24/08/21/66c564f3c4cb3.jpg',
      list: [
        { images: 'https://js.ibaotu.com/act/24/08/16/66befb9d425d8.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/09/03/66d6734753ca2.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/08/26/66cc025b7f675.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/08/26/66cc025e177db.jpg', href: '' },
      ]
    },
    {
      text: '地产营销',
      images: 'https://js.ibaotu.com/act/24/08/26/66cc02ac4f6de.jpg',
      list: [
        { images: 'https://js.ibaotu.com/act/24/08/26/66cc025460db9.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/08/26/66cc02afa019e.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/08/26/66cc025b7f675.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/08/26/66cc025e177db.jpg', href: '' },
      ]
    },
    {
      text: '党政宣传',
      images: 'https://js.ibaotu.com/act/24/08/16/66befb49f1598.jpg',
      list: [
        { images: 'https://js.ibaotu.com/act/24/08/16/66befb503fdb6.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/08/16/66befb56455ac.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/08/16/66befb535e47f.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/08/16/66befb4cea6eb.jpg', href: '' },
      ]
    },
  ];

  const [selectedIndex, setSelectedIndex] = useState<number>(0);
  //   const handleSelect = (newIndex) => {  
  //     setSelectedIndex(newIndex);  
  //     console.log(selectedIndex )
  // };

  const navigate = useNavigate();
  const goposter = (text: any) => {
    console.log(text);
    if (text === '精选推荐') {
      navigate(`/poster/:1`);
    } else if (text === '秋日营销') {
      navigate(`/poster/:2`);
    } else if (text === '热门视频') {
      navigate(`/poster/:3`);
    }
  }
  return (
    <div className='focusing_box'>
      {/* nav */}
      <div className='focusing_top'>
        <div className='foc_title'>
          <Title title='聚焦近期热点' />
        </div>

        <div className='foc_nav'>
          <Nav items={items}
            onSelect={setSelectedIndex}
            selectedIndex={selectedIndex}
          />
        </div>
      </div>

      {/* tu */}
      <div className='focusing_tu'>
        <div className='da_tu'>
          <img src={items[selectedIndex].images} onError={(e) => { e.target.src = items[selectedIndex].defaultImg }} alt='加载失败' onClick={() => goposter(items[selectedIndex].text)} />
        </div>
        
        <div className='xiao_tu'>
          {
            items[selectedIndex].list.map((item, index) => {
              return (
                <div key={index}>
                  <ImageFallback src={item.images} fallbackSrc={items[selectedIndex].defaultImg} alt='加载失败' />
                </div>
              )
            })
          }

        </div>
      </div>

    </div>
  )
}

export default Focusing
